<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
import { ref, watchEffect } from 'vue'

const count = ref(props.modelValue)

watchEffect(() => {
  // 只要监听到了 modelValue 值的变化，就立即更新到 count 中
  count.value = props.modelValue
})

watchEffect(() => {
  emit('update:modelValue', count.value)
})
</script>

<template>
  <h3>MyCounter2 --- {{ count }}</h3>
  <button @click="count++">+1</button>
  <button @click="count--">-1</button>
</template>
